"use client";

import { CDN } from "@/utils/env";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLanguageStore } from "@/store/languageStore";

export default function Pc() {
  const pathname = usePathname();
  const router = useRouter();
  const [isTop, setIsTop] = useState(true);
  const { isMenuOpen, toggleMenu } = useLanguageStore(); // 从 zustand 获取状态和方法
  const { t } = useTranslation();

  useEffect(() => {
    const handleScroll = () => {
      setIsTop(window.scrollY < 50);
    };

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <header className="hidden lg:block">
      <div
        className={`fixed left-0 top-0 w-full flex items-center px-[60px] h-[64px] z-10 transition-colors duration-200 ${
          isTop ? "bg-transparent" : "bg-[#fff] shadow-lg"
        }`}
      >
        <img className="w-[30px] h-[30px]" src={`${CDN}images/home/logo.png`} />
        <div className="text-[#333] text-[15px] font-[700] mx-[5px] flex-1">
          alexander
        </div>
        <div className="flex">
          <div
            onClick={() => {
              router.push(`/${location.search}`);
            }}
            className={`mx-[20px] text-[#333] cursor-pointer hover:text-black ${
              pathname === "/" && "text-[#FF6939]"
            }`}
          >
            {t("Home")}
          </div>
          <div
            onClick={() => {
              router.push(`/download${location.search}`);
            }}
            className={`mx-[20px] text-[#333] cursor-pointer hover:text-black  ${
              pathname === "/download" && "text-[#FF6939]"
            }`}
          >
            {t("Download")}
          </div>
          <div
            onClick={() => {
              router.push(`/${location.search}#faq-section`);
            }}
            className={`mx-[20px] text-[#333] cursor-pointer hover:text-black  ${
              pathname === "/faq" && "text-[#FF6939]"
            }`}
          >
            {t("FAQ")}
          </div>
          <div className="flex items-center">
            <img
              className="w-[24px] h-[24px] cursor-pointer ml-[20px]"
              src={`${CDN}images/home/language.svg`}
              onClick={() => {
                toggleMenu(!isMenuOpen); // 使用 zustand 的 toggleMenu 方法
              }}
            />
          </div>
        </div>
      </div>
    </header>
  );
}
